<template>
  <div class="activity-card">
    <div class="header">
      <span>俱乐部活动数据</span>
    </div>
    <div class="statistics-row">
      <div class="info">
        <span class="unit-line"></span>
        <div class="text">
          <span class="unit">累计举办活动(或培训)次数</span>
          <span class="number">{{ activityCount.toLocaleString() }}</span>
        </div>
      </div>
      <div class="info">
        <span class="unit-line"></span>
        <div class="text">
          <span class="unit">累计参与活动人次</span>
          <span class="number">{{ participantCount.toLocaleString() }}</span>
        </div>
      </div>
    </div>
    <div class="table-container">
      <div>活动明细</div>
      <el-table :data="tableData" style="width: 100%" size="mini">
        <el-table-column prop="index" label="序号" width="80" />
        <el-table-column prop="name" label="俱乐部名称" />
        <el-table-column
          prop="activityCount"
          label="年均举办活动(或培训)次数"
        />
        <el-table-column prop="participantCount" label="年均参加人数" />
      </el-table>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { getActivityData } from "@/api/statistics";

export default {
  data() {
    return {
      activityCount: 20000,
      participantCount: 20000,
      tableData: [
        {
          index: 1,
          name: "俱乐部名称1",
          activityCount: 3,
          participantCount: 32
        },
        {
          index: 2,
          name: "俱乐部名称2",
          activityCount: 6,
          participantCount: 87
        },
        {
          index: 3,
          name: "俱乐部名称3",
          activityCount: 5,
          participantCount: 94
        },
        {
          index: 4,
          name: "俱乐部名称4",
          activityCount: 12,
          participantCount: 76
        },
        {
          index: 5,
          name: "俱乐部名称5",
          activityCount: 2,
          participantCount: 45
        }
      ]
    };
  },
  async created() {
    await this.drawChart();
  },
  methods: {
    async drawChart() {
      try {
        const res = await getActivityData({ year: new Date().getFullYear() });
        if (res && res.data) {
          this.activityCount = res.data.activityCount;
          this.participantCount = res.data.participantCount;
          this.tableData = res.data.list;
          this.$nextTick(() => {
            this.initChart();
          });
        }
      } catch (error) {
        console.error("获取俱乐部活动数据失败:", error);
      }
    },
    initChart() {
      const chart = echarts.init(this.$refs.chart);
      const option = {
        title: {
          text: "俱乐部活动数据"
        },
        tooltip: {
          trigger: "axis"
        },
        xAxis: {
          type: "category",
          data: this.tableData.map(item => item.name)
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "年均举办活动(或培训)次数",
            type: "bar",
            data: this.tableData.map(item => item.activityCount)
          },
          {
            name: "年均参加人数",
            type: "bar",
            data: this.tableData.map(item => item.participantCount)
          }
        ]
      };
      chart.setOption(option);
    }
  }
};
</script>

<style scoped>
.activity-card {
  width: 100%;
  background-color: #fff;
  border-radius: 8px;
}

.header {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
}

.statistics-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  background-color: #f0f2f5;
}

.info {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 10px;
  border-radius: 4px;
}

.unit-line {
  display: inline-block;
  width: 4px;
  height: 40px;
  background-color: #67c23a;
  margin-right: 8px;
}

.text {
  display: flex;
  flex-direction: column;
}

.unit {
  font-size: 14px;
  color: #999;
}

.number {
  font-size: 28px;
  font-weight: bold;
  color: #333;
}

.table-container {
  margin-top: 20px;
}

:deep(.el-table) {
  --el-table-border-color: #ebeef5;
  --el-table-header-background-color: #f5f7fa;
}

:deep(.el-table th) {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: bold;
}

:deep(.el-table--striped .el-table__body tr.el-table__row--striped td) {
  background-color: #f5f7fa;
}
</style>
